<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('训练成绩录入')"/>
    <th:block th:include="include :: select2-css"/>
    <th:block th:include="include :: bootstrap-select-css"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <style>
        input{
            border-radius: 10px;
            height: 30px;
            border: 1px solid #9e9e9e;
            padding-left: 5px;
            margin-right: 20px;
        }
        span{
            display: inline-block;width: 100px;text-align: right;
        }
        .box-pan{
            background: #fff !important;
            padding-bottom: 20px;
        }
        .box-menu.nav>li>a{
            font-weight: normal;
            color: #666 !important;
            font-size: 16px !important;
        }
        .box-menu.nav>li.active a{ color: #0d8ddb  !important;}
        .box-tab.nav{ border: none !important; text-align: center;}
        .box-tab.nav>li{
            float: none !important;
            clear: both;
            display: inline-block;
            background-color:#fdfdfd;
            border: 1px solid #fcfcfc !important;
            font-weight: normal;
            margin: 4px 8px;
        }
        .box-tab.nav>li>a{
            /*background-color:#676a6c;*/
            font-weight: normal;
            font-size: 16px !important;
        }
        .box-tab.nav>li>a:hover{
            border: none;
            color: #0d8ddb;
            border-color: #34C5B2;
            font-weight: normal;
            box-shadow: 0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)!important;
        }
        .box-tab.nav>li>a.on{
            border: none;
            color: #2A2E36;
            border-color: #34C5B2;
            font-weight: normal;
            background: #ccc;
            box-shadow: 0 1px 3px 0 rgba(0,0,0,.08),0 1px 2px 0 rgba(0,0,0,.1)!important;
        }
        .box-tab.nav>li>a i{ display: inline-block; font-style: normal;}

        .box-tab.nav>li.active{
            background:#34C5B2 !important;
            border: 1px solid #5e72e4 !important;
            border-radius:6px;
            box-shadow: 0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)!important;
        }
        .box-tab.nav>li.active.on{
            background:#ddd !important;
        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form class="form-horizontal" id="data-form">
                <input class="control-label" id="trainingProgramNumber" name="trainingProgramNumber"  th:value="*{trainingProgramNumber}" readonly="true" hidden="true">
                <input id="projectType" name="projectType"  th:value="*{projectType}" hidden="true">
                <input id="centerId" name="centerId"  th:value="*{centerId}" hidden="true">
<!--                <input id="courseId" name="courseId"  th:value="*{courseId}" hidden="true">-->
                <input id="childId" name="childId"  th:value="*{childId}" hidden="true">
<!--                <input id="teacherId" name="teacherId"  th:value="*{teacherId}" hidden="true">-->
<!--                <input id="teacherName" name="teacherName"  th:value="*{teacherName}" hidden="true">-->
               <!-- <div class="panel blank-panel">

                    <div class="panel-heading">
                        <div class="panel-options">

                            <ul class="nav nav-tabs" th:each="studentBasics: *{students}">

                                <li class=""><a class="btn btn-default btn-rounded" th:onclick="|studentEntering(*{studentBasics.childId})|">
                                    <i th:text="*{studentBasics.childName}"></i></a>
                                </li>

                            </ul>
                        </div>
                    </div>

                    <div class="panel-body">
                        <div class="tab-content">
                            <div id="tab" class="tab-pane active">

                            </div>
                        </div>
                    </div>

                </div>-->
                <div class="panel-heading">
                    <div class="panel-options">
                        <ul class="nav nav-tabs nav-justified box-menu" id="box-menu">
                            <li  th:each="studentBasics:${students}" th:class="${studentBasics.index == 0 ? 'active' : ''}" ><a
                                    data-toggle="tab" th:onclick="|studentEntering(*{studentBasics.childId})|"
                                    th:id="'tab-menu-' + ${studentBasics.index}" ><span style="width: 150px;font-size: 15px">[[${studentBasics.childName}]]</span></a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="tab-content">
                        <div id="tab" class="tab-pane active">

                        </div>
                    </div>
                </div>
            </form>
        </div>

        <div class="row">
            <div class="col-sm-offset-5 col-sm-10">
                <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
                <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭</button>
            </div>
        </div>
    </div>
</div>



<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/>
<th:block th:include="include :: bootstrap-select-js"/>
<th:block th:include="include :: datetimepicker-js"/>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:inline="javascript">
    var prefix = ctx + "education/childtrainingProgram";
    var savePrefix = ctx + "education/childScheduleRecord";
    var selecChildId = '';
    var dataLength=0;
    $(function () {
        studentEntering($('#childId').val());
    });
    // 切换小孩展示该小孩的课程评分
    function studentEntering(studentId) {
        var formData = new FormData();
        formData.set("projectType", $('#projectType').val());
        formData.set("childId", studentId);
        formData.set("trainingProgramNumber", $('#trainingProgramNumber').val());
        formData.set("isChoosed",  1);
        // formData.set("trainingTime",  $('#trainingProgramNumber').val());
        // formData.set("courseId",  $('#courseId').val());
        $.ajax({
            url: prefix + '/findByChildAndProjecttype',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',
            success: function (result) {
                if (result.code == '0') {
                    var $tab = $("#tab");
                    $tab.html("");
                    if (result.data != null) {
                        for (var i = 0; i < result.data.length; i++) {
                            $tab.append("<div><p>" + (i+1) + ". " + result.data[i].trainingContent + "</p>" +
                                "<input name='list["+ i +"].id' type='hidden' value='"+ result.data[i].id +"'>");
                            // if(result.data[i].trainingLevel==0){
                            //     $tab.append("<p><span>结果：&nbsp;&nbsp</span><font color='#7fff00'>已稳定"+"<input type='hidden' name='list["+ i +"].totalNum' value='"+ result.data[i].totalNum +"' type='number'/><span></span><input type='hidden' name='list["+ i +"].completeNum' value='"+ result.data[i].completeNum +"' type='number'/><input type='hidden' name='list["+ i +"].trainingLevel' value='"+ result.data[i].trainingLevel +"'/></p>");
                            // } else {
                                if (result.data[i].inputType == 1) {
                                    if(result.data[i].noTraining == 1){
                                        $tab.append("<p><span>平均达成时间"+result.data[i].correctNumTip+"：</span><input  name='list["+ i +"].completeNum' value='"+ result.data[i].completeNum +"' type='number'onkeyup=\"value=value.replace(/^0(0+)|[^\\d]+/g,'')\" onchange=\"value=value.replace(/^0(0+)|[^\\d]+/g,'')\" placeholder='只能输入正整数' disabled /><input type='checkbox' name='list["+ i +"].noTraining' onclick=\"checkboxOnclick(this)\"  checked>未训练<input type='hidden' name='list["+ i +"].trainingLevel' value='"+ result.data[i].trainingLevel +"'/></p>");
                                    }else {
                                        $tab.append("<p><span>平均达成时间"+result.data[i].correctNumTip+"：</span><input  name='list["+ i +"].completeNum' value='"+ result.data[i].completeNum +"' type='number'onkeyup=\"value=value.replace(/^0(0+)|[^\\d]+/g,'')\" onchange=\"value=value.replace(/^0(0+)|[^\\d]+/g,'')\" placeholder='只能输入正整数'/><input type='checkbox' name='list["+ i +"].noTraining' onclick=\"checkboxOnclick(this)\" >未训练<input type='hidden' name='list["+ i +"].trainingLevel' value='"+ result.data[i].trainingLevel +"'/></p>");
                                    }

                                }
                                else if (result.data[i].inputType == 2){
                                    if(result.data[i].noTraining == 1){
                                        $tab.append("<p><span>平均达成距离"+result.data[i].correctNumTip+"：</span><input name='list["+ i +"].completeNum' value='"+ result.data[i].completeNum +"' type='number' onkeyup=\"value=value.replace(/^0(0+)|[^\\d]+/g,'')\" onchange=\"value=value.replace(/^0(0+)|[^\\d]+/g,'')\" placeholder='只能输入正整数' disabled/><input type='checkbox' name='list["+ i +"].noTraining' onclick=\"checkboxOnclick(this)\"  checked>未训练<input type='hidden' name='list["+ i +"].trainingLevel' value='"+ result.data[i].trainingLevel +"'/></p>");
                                    }else {
                                        $tab.append("<p><span>平均达成距离"+result.data[i].correctNumTip+"：</span><input name='list["+ i +"].completeNum' value='"+ result.data[i].completeNum +"' type='number' onkeyup=\"value=value.replace(/^0(0+)|[^\\d]+/g,'')\" onchange=\"value=value.replace(/^0(0+)|[^\\d]+/g,'')\" placeholder='只能输入正整数'/><input type='checkbox' name='list["+ i +"].noTraining' onclick=\"checkboxOnclick(this)\" >未训练<input type='hidden' name='list["+ i +"].trainingLevel' value='"+ result.data[i].trainingLevel +"'/></p>");
                                    }
                                }
                                else if (result.data[i].inputType == 3){
                                    if(result.data[i].noTraining == 1){
                                        $tab.append("<p><span style='width: 120px'>尝试回合"+result.data[i].correctNumTip+"：</span><input name='list["+ i +"].totalNum' value='"+ result.data[i].totalNum +"' type='number' placeholder='只能输入正整数' onkeyup=\"value=value.replace(/^0(0+)|[^\\d]+/g,'')\" onchange=\"value=value.replace(/^0(0+)|[^\\d]+/g,'')\" disabled /><span>达成回合：</span><input name='list["+ i +"].completeNum' value='"+ result.data[i].completeNum +"' type='number' onkeyup=\"value=value.replace(/^0(0+)|[^\\d]+/g,'')\" onchange=\"value=value.replace(/^0(0+)|[^\\d]+/g,'')\" placeholder='只能输入正整数' disabled /><input type='checkbox' name='list["+ i +"].noTraining' onclick=\"checkboxOnclick(this)\"  checked>未训练<input type='hidden' name='list["+ i +"].trainingLevel' value='"+ result.data[i].trainingLevel +"'/></p>");
                                    }else {
                                        $tab.append("<p><span style='width: 120px'>尝试回合"+result.data[i].correctNumTip+"：</span><input name='list["+ i +"].totalNum' value='"+ result.data[i].totalNum +"' type='number' placeholder='只能输入正整数' onkeyup=\"value=value.replace(/^0(0+)|[^\\d]+/g,'')\" onchange=\"value=value.replace(/^0(0+)|[^\\d]+/g,'')\"/><span>达成回合：</span><input name='list["+ i +"].completeNum' value='"+ result.data[i].completeNum +"' type='number' onkeyup=\"value=value.replace(/^0(0+)|[^\\d]+/g,'')\" onchange=\"value=value.replace(/^0(0+)|[^\\d]+/g,'')\" placeholder='只能输入正整数'/><input type='checkbox' name='list["+ i +"].noTraining' onclick=\"checkboxOnclick(this)\" >未训练<input type='hidden' name='list["+ i +"].trainingLevel' value='"+ result.data[i].trainingLevel +"'/></p>");
                                    }
                                }
                            // }
                            dataLength =i;
                        }
                    }
                }
            }
        });
    }
    $.fn.serializeJson=function(){  //表单序列化获取未选中的CheckBox
        var serializeObj={};
        var temp=this.serializeArray();
        var not_checked_object=$('input[type=checkbox]:not(:checked)', this);
        $.each(not_checked_object, function () {
            if (!temp.hasOwnProperty(this.name)){//this指没选中的一个object
                temp.push({name: this.name, value: ""});
            }
        });
        $(temp).each(function(){  //将有相通name的CheckBox合并到一个数组中
            if(serializeObj[this.name]){
                if($.isArray(serializeObj[this.name])){
                    serializeObj[this.name].push(this.value);
                }else{
                    serializeObj[this.name]=[serializeObj[this.name],this.value];
                }
            }else{
                serializeObj[this.name]=this.value;
            }
        });
        return serializeObj;
    };

    function checkboxOnclick(checkbox){
        if ( checkbox.checked == true){
            $("input[name='"+checkbox.name.split('.')[0]+".completeNum']").attr("disabled","disabled");
            $("input[name='"+checkbox.name.split('.')[0]+".totalNum']").attr("disabled","disabled");
            // alert(checkbox.name.split('.')[0]);
        }else{
            $("input[name='"+checkbox.name.split('.')[0]+".completeNum']").removeAttr("disabled");
            $("input[name='"+checkbox.name.split('.')[0]+".totalNum']").removeAttr("disabled");
            // alert(false);
        }
    }
    function submitHandler() {
        var row={"id":"","totalNum":"","completeNum":"","trainingTime":"","teacherId":"","teacherName":"","courseId":"","childId":"","trainingLevel":""};
        if ($.validate.form()) {
            var list =[];
            var data = $('#data-form').serializeJson();
            var ttime = $('#trainingProgramNumber').val();
            var teacherId = $('#teacherId').val();
            var teacherName = $('#teacherName').val();
            var courseId = $('#courseId').val();

            for(var i=0;i<=dataLength;i++){
                row={"id":"","totalNum":"","completeNum":"","trainingTime":"","teacherId":"","teacherName":"","courseId":"","childId":"","trainingLevel":"","noTraining":""};
                row.id = data["list["+i+"].id"];
                row.totalNum = data["list["+i+"].totalNum"];
                row.completeNum = data["list["+i+"].completeNum"];
                row.noTraining = data["list["+i+"].noTraining"]=="on"?1:0;
                row.trainingLevel = data["list["+i+"].trainingLevel"];

                if(row.noTraining==0 && parseInt(row.completeNum)>parseInt(row.totalNum)){
                    $.modal.alertWarning("达成回合数应小于等于尝试回合数");
                    return;
                }

                row.trainingTime = ttime;
                row.teacherId = teacherId;
                row.teacherName = teacherName;
                row.courseId = courseId;
                row.childId = $('#childId').val();
                row.centerId = $('#centerId').val();
                row.projectType = $('#projectType').val();
                list.push(row)

            }
            /*for (var i = 0; i < data.length; i++) {
                if(i>6){
                   if(i%4==3){
                        row={"id":"","totalNum":"","completeNum":"","trainingTime":"","teacherId":"","teacherName":"","courseId":"","childId":"","trainingLevel":""};
                        row.id = data[i].value;
                    }
                    else if(i%4==0){
                        if(data[i].value) {
                            row.totalNum = data[i].value;
                        }
                    }
                    else if(i%4==1){
                       if(data[i].value) {
                           row.completeNum = data[i].value;
                       }
                   }
                   else if(i%4==2){
                       if(data[i].value) {
                           row.trainingLevel = data[i].value;
                       }
                       row.trainingTime = ttime;
                       row.teacherId = teacherId;
                       row.teacherName = teacherName;
                       row.courseId = courseId;
                       row.childId = selecChildId;
                       row.centerId = $('#centerId').val();
                       row.projectType = $('#projectType').val();
                       list.push(row)
                   }

                }
            }*/
            $.ajax({
                url:savePrefix + "/saveEntering",
                type: "POST",
                contentType:"application/json",
                data:JSON.stringify(list),
                success: function(result) {
                    if (result.code == 0) {
                        $.modal.alertSuccess("保存成功");
                        setTimeout(function () {
                            closeItem();
                        },1000);
                    } else {
                        $.modal.alertSuccess(result.msg);
                    }
                }
            })
        }
    }
    //默认显示第一个
    $("#box-menu").children(":first-child").addClass('active');
    $(".mainbox:first-child .mod").addClass('active');

    $(".active").find(".boxss:first-child .tab-pane").addClass('active');

    $(".hover-box").hover(function(){
        $(this).find('.hover-btn').show();
    },function(){
        $(this).find('.hover-btn').hide();
    })

    //获取当前哪个
    var len=$('.mod.active').find(".box-tab li").length;
    //判断点击过的
    $("input:radio:checked").addClass('checked');
    $(".tab-pane.active").find(".hover-box").on("click",function (){
        $(this).find("input:radio").addClass('checked');
        $(this).siblings('.hover-box').find("input:radio").removeClass('checked');
    });
    fy();
    function fy(){
        var c=$('.mod.active').find('input');
        if(c.hasClass("checked")){
            // console.log("ccccccccc===",$(".checked").length)
            var box=$('.mod.active').find('.checked');
            for(var i=0;i< box.length;i++){

                var g=$('.mod.active').find('.checked').eq(i).attr('name');
                console.log("ggggg=",g)
                $(".mod.active").find("li[id='tab-q-"+g+"'] a").addClass('on');
            }
        }
    }

</script>
</body>

</html>